<template>
	<div id="expert">
    	<com-head>{{isexpert[status]}}专家</com-head>
			<div class="scrolltop" @click="scrolltop"></div>
    	<div class="expertdetail">
				<div class="wrapper" ref="wrapper">
      			<div class="content">
							<div class="box" v-for="(item,index) in message" @click="recommes(item.expert_id)"  :key="index">
								<div class="left">
										<img :src="item.expert_img" alt="" />
										<div class="qiuyuan">{{item.position}}</div>
								</div>
								<div class="right" >
									<p style="display: inline-block;">{{item.expert_name}}</p>
									<div class="wuzhong" style="display: inline-block;" v-show='item.probability'>{{item.probability}}</div>
									<p>{{item.expert}}</p>
								</div>
							</div>
    			</div>
				</div>
    	</div>
    	<com-foot :select="5"></com-foot>
	</div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  name: "expert",
  data() {
    return {
      status: this.$route.query.status,
      isexpert: { "0": "篮球", "1": "足球", "2": "已关注" },
      message: []
    };
  },
  created() {
    if (parseInt(this.status) === 0) {
      // 请求篮球专家数据
      this.getLandetail();
    } else if (parseInt(this.status) === 2) {
      //请求关注专家
      this.guanzhu();
    } else if (parseInt(this.status) === 1) {
      // 请求足球专家数据
      this.getZudetail();
    } else {
      //足球和篮球
      this.getAll();
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   // var key = JSON.parse(localStorage.fencaike);
  //   // console.log(key.userid);
  //   if(localStorage.fencaike) {
  //     next(vm => {
  // 		// vm.isLogin();
  // 		if (parseInt(vm.status) === 0) {
  // 			// 请求篮球专家数据
  // 		vm.getLandetail();
  // 	}else if(parseInt(vm.status) === 2){
  // 		//请求关注专家
  // 		vm.guanzhu();
  // 	} else if(parseInt(vm.status)=== 1) {
  // 		// 请求第足球专家数据
  // 		vm.getZudetail();
  // 	}else{
  // 		//足球和篮球
  // 		vm.getAll();
  // 	}
  //  })
  // } else{
  //     next(vm => {
  //     vm.$router.push('login');
  //     vm.$bus.$emit('toast', '请先登录账户');
  //   })
  //  }
  // },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        click: true,
        dblclick: true
      });
    });
  },
  methods: {
    scrolltop() {
      this.scroll.scrollTo(0, 0, 500);
    },
    // 足球专家列表
    getZudetail() {
      this.axios
        .post("Ball/index")
        .then(response => {
          this.message = response.data.football;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 篮球专家列表
    getLandetail() {
      this.axios
        .post("Ball/basketball_index")
        .then(response => {
          this.message = response.data.football;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    guanzhu() {
      this.axios.post("User/concerned_expert").then(response => {
        this.message = response.data;
      });
    },
    //足球和篮球
    getAll() {
      this.axios.post("Ball/count_expert").then(response => {
				console.log(response);
        this.message = response.data.expert;
      });
    },
    recommes(id) {
      this.$router.push({ name: "recommendmes", query: { id: id } });
    }
  }
};
</script>

<style lang="scss">
#expert {
  background-color: #ffc29b;
  .scrolltop {
    height: 80px;
    width: 75%;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 25%;
    z-index: 99;
  }
  .wrapper {
    height: 90%;
    width: 100%;
    position: fixed;
    top: 6%;
    overflow: hidden;
    .content {
      padding-left: 49px;
      padding-top: 10px;
      padding-bottom: 100px;
      .box {
        width: 662px;
        height: 226px;
        margin-top: 29px;
        margin-left: -22px;
        background: rgba(255, 255, 255, 1);
        border-radius: 15px;
        display: flex;
        justify-content: center;
        position: relative;
        &::before {
          content: "";
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background: #ffc29b;
          position: absolute;
          top: 50px;
          left: -15px;
        }
        &::after {
          content: "";
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background: #ffc29b;
          position: absolute;
          top: 50px;
          right: -15px;
        }
        .left {
          width: 125px;
          height: 176px;
          margin: 35px 15px 25px 0;
          box-sizing: border-box;
          // background-color: red;
          overflow: hidden;
          position: relative;
          img {
            width: 100%;
          }
          .qiuyuan {
            width: 52px;
            height: 30px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            background-color: #fb690a;
            position: absolute;
            left: 36px;
            bottom: 13px;
            color: rgba(255, 255, 255, 1);
            -webkit-transform: scale(0.8);
            // transform: translateX(-50%);
          }
        }
        .right {
          width: 455px;
          height: 176px;
          line-height: 30px;
          box-sizing: border-box;
          padding-top: 35px;
          p:nth-of-type(1) {
            font-size: 26px;
            color: rgba(77, 77, 77, 1);
          }
          p:nth-of-type(2) {
            font-size: 22px;
            padding-top: 8px;
            color: rgba(124, 124, 124, 1);
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
          .wuzhong {
            // width:55px;
            // height:28px;
            text-align: center;
            background: rgba(253, 0, 0, 1);
            border-radius: 3px;
            float: right;
            font-size: 16px;
            padding: 3px;
            color: #fff;
            -webkit-transform: scale(0.8);
          }
        }
      }
    }
  }
}
</style>
